<template>
  <div>
    <vue-tinymce
        ref="tinymce"
        @input="$emit('input', content)"
        v-model="content"
        :init="setting"
    >
    </vue-tinymce>
  </div>
</template>
<script>
import vueTinymce from "@tinymce/tinymce-vue";

export default {
  components: {
    vueTinymce,
  },
  props: {
    value: {
      type: String,
      default: null,
    },
    plugins: {
      type: [String, Array],
      default: "lists image media table wordcount code fullscreen help  autosave nonbreaking insertdatetime visualchars visualblocks searchreplace  pagebreak link charmap preview  anchor ",
    },
    toolbar: {
      type: [String, Array],
      default() {
        return [
          "newdocument undo redo | formatselect visualaid|cut copy paste selectall| bold italic underline strikethrough |codeformat blockformats| superscript subscript  | forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent |  removeformat | code  bullist numlist | lists image media table link |fullscreen help toc fullpage restoredraft nonbreaking insertdatetime visualchars visualblocks searchreplace spellchecker pagebreak anchor charmap  pastetext print preview  assignment",
        ];
      },
    },
  },
  data() {
    return {
      content: this.value,
      setting: {
        height: 500,
        menubar: false,
        statusbar: false, // 隐藏编辑器底部的状态栏
        language: "zh-Hans",//语言
        plugins: this.plugins,//插件
        toolbar: this.toolbar,//工具栏
        paste_data_images: true, // 允许粘贴图像
        placeHolder: "请输入内容",
        images_upload_handler: (blobInfo, success, failure) => {
          const img = "data:image/jpeg;base64," + blobInfo.base64();
          success(img);
        },
        setup: (editor) => {
          //定义一个名为 assignment 的toolbar
          editor.ui.registry.addButton("assignment", {
            icon: `upload`,
            tooltip: "赋值",
            onAction: () => {
              this.$message.success("点击展示" + this.content);
            },
          });
        },
      },
    };
  },
  watch: {
    value(val) {
      if(val !== this.content) {
        this.content = val;
      }
    },
  },
};
</script>
